import React,{useState} from 'react'
import EffectDemo from './components/EffectDemo'
/*
  useEffect是完成副作用的功能
  必须可以在这里边完成模拟生命周期的操作，也可以模拟vue的侦听器
  使用useEffect的步骤
  1、导入useEffect
  2、在函数组件的内部，调用useEffect
  useEffect的作用很多，根据参数来决定它的作用,它的参数有两个
  参数1：规定回调函数
  参数2：可以省略，也可以是一个数组
  3、参数2的不同情况作用
  3.1)如果没有参数2：它就相当于模拟生命周期中的componentDidMount+componentDidUpdate
  当数据变化的时候它会被执行1次
  无论函数组件中的所有的state发生变化之后，它都会执行
  3.2)参数2是一个空数组:它相当于是在模拟生命周期中的componentDidMount
  3.3)参数2是一个数组，数组中的元素是state中的内容，它就会监听该state数据的变化，如果该数据没有放在数组中，数据变化了useEffect不监听，就相当于模拟了watch的操作
  4、第一个参数中如果有返回返回函数，这个返回函数是在模拟componentWillUnmount的操作
*/
export default function App() {
  const [show,setShow]=useState(true)
  
  return (
    <div>
      {show?<EffectDemo></EffectDemo>:<></>}
      <hr />  
      <button onClick={()=>{setShow(!show)}}>卸载</button>
    </div>
  )
}
